
、<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>个人中心</title>
        <link rel="stylesheet" href="main1.css">
        <link rel="stylesheet" href="common1.css">
        <!-- <link rel="stylesheet" href="main1.js"> -->
        <link rel="stylesheet" href="iconfont.css">
        <style type="text/css">

        </style>
        </style>
        <script type="text/javascript"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
        <link rel="shortcut icon" href="../../../../favicon.ico" />
    </head>
    <body style="overflow: hidden;">
        <div class="box">
        <div id="top">
            <div class="top-img1"><img src="./img./云淄logo.png" width="65px"  height="65px" ></div>
           <div class="top-a1"><a href="../个人中心-浏览/个人中心-浏览.html">个人中心</a></div>
           <div class="top-a2"><a href="../../../主页.html">返回主页</a></div>
           <div id="search">
            <span>搜索 &nbsp;</span>
            <input id="search-box" type="text" value="例如：书名" onclick="back()" onblur="back0()" v-model="query" @keyup.enter="searchInformation"> 
             <!-- <button id="button-box"style=" background:url(./img./2.png);"></button> -->
          </div>
        </div>
        <div class="body1">
            <div class="body2">
                <div class="body2-input">
                    <div class="body2-box"></div>
                </div>
                </div>
            </div>
            <div id="body3">
               
                  
                    <form id="userData"  @submit.prevent="submitFrom()" >
                        <div>
                        <div class="button"><button id="button1" type="submit" value="完成"><span class="iconfont" style="color: #fff;">&#xe69c;</span>完成</button></div>
                        <!-- 头像信息 -->
                        <div class="headInformation2" style="font-size: 26px;">头像：</div>
                        <div class="headInformation1">
                            <img id="img" src="">
                        </div>
                        <div class="profilePicture">
                            <input type="file"class="file" id="fileImg" style="width: 100px; height: 25px;"></input>
                        <label for="fileImg" @click="upImg()">上传</label>
                        </div> 
                        <div class="boxline"></div>
                        <!-- 方向信息 -->
                        <div class="direction" style="font-size: 26px;">方向：</div>
                        <div class="directionSearch">
                            <select name="directionSearchInformation" id="selectid" style="width: 180px;height: 40px;font-size: 18px;" @change="getValue()" v-model="direction">
                                <option value="设计">设计</option>
                                <option value="秘书处">秘书处</option>
                                <option value="cpu">cpu</option>
                                <option value="前端">前端</option>
                                <option value="Java">Java</option>
                                <option value="Pythen">Pythen</option>
                                <option value="人工智能">人工智能</option>
                                <option value="c/c++">c/c++</option>
                                <option value="操作系统">操作系统</option>
                                <option value="操作系统">JS</option>
                            </select>
                            <div class="boxline2"></div>
                            <!-- 姓名信息 -->
                            <div class="name"style="font-size: 26px;">姓名：</div>
                            <div class="nameInformation"><input type="text" style="width: 180px;height: 35px;font-size: 18px;"  v-model="name"></div>
                            <div class="boxline3"></div>
                            <div class="nameInformation2" style="color: red;">*</div>
                            <div class="nameInformation3">请输入真实姓名</div>
                        </div>
                        <!--期数信息 -->
                        <div class="periods"style="font-size: 26px;">期数：</div>
                        <div class="periodsSearch">
                            <select name="periodsInformations" id="selectid2" style="width: 180px;height: 40px;font-size: 18px;" @change="getValue2()" v-model="period_number">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                        <div class="boxline4"></div>
                        <!-- 性别信息 -->
                        <div class="gender"style="font-size: 26px;">性别：</div>
                        <div class="genderSearch" style="size: 10px;">
                            <div class="radio1"><input type="radio" name="a" value="女" v-model="sex"></div>
                            <div class="girl" style="font-size: 23px;">女</div>
                            <div class="radio2"><input type="radio" name="a" value="男" v-model="sex" style="position: relative; top:6px" ></div>
                            <div class="boy" style="font-size: 23px;position: relative; top:7px">男</div>
                        </div>
                        <div class="boxline5"></div>
                        <!-- 电话信息 -->
                        <div class="phone" style="font-size: 26px;">联系电话：</div>
                        <div class="phoneInformation"><input type="text" style="width: 180px;height: 35px;font-size: 18px;" v-model="tel"></div>
                        <div class="boxline6"></div>
                        <!-- 学号信息 -->
                        <div class="studentNumber" style="font-size: 26px;">学号：</div>
                        <div class="studentNumberInformation"><input type="text" style="width: 180px;height: 35px;font-size: 18px;"  v-model="student_number"></div>
                        <div class="boxline7"></div>
                        <div class="studentNumberInformation2" style="color: red;">*</div>
                        <div class="studentNumberInformation3">请输入正确格式</div>
                        <!-- 邮件信息 -->
                        <div class="email" style="font-size: 26px;">电子邮件：</div>
                        <div class="emailInformation"><input type="email" style="width: 180px;height: 35px;font-size: 18px;" readonly="readonly" v-model="mail"></div>
                        <div class="boxline8"></div>
                        <div class="body3-input"><img  src="" id="img00"></div>
                        </div>
                    </form>
                  
                    <script>
                        var app = new Vue({
                          el: "#userData",
                            data:{ 
                                token:'',
                                direction:"",
                                period_number:"",  
                                name:"",
                                tel:'',
                                mail:'',
                                // 3094969938@qq.com
                                student_number:'',
                                // img: '{'+'"'+'image_path'+'"'+':'+'"'+img_one+'"'+','+'"'+'old_name'+'"'+':'+'"'+img_two+'"'+'}' ,
                                sex:"",
                            
                                },
                        created(){
                            this.token=localStorage.getItem('token');
                                        },
                        // mounted:function(){
                        //                 this.loading();
                                       
                        //                         },
                          methods:
                          {
                               submitFrom()
                              {  
                                  that=this;
                                    console.log(that.token)
                                  console.log(that.name);
                                  console.log(that.sex);
                                  console.log(that. period_number);
                                 console.log(that.direction);
                                 console.log(that.student_number);
                                 console.log(that.tel);
                                //  console.log(that.img_url);
                                 axios.post("http://39.101.197.26:8080/Borrow_war/mu",
                                 {mail:this.mail+'',name:this.name+'',period_number:this.period_number+'',direction:this.direction+'',
                                 tel:this.tel+'',sex:this.sex+'',student_number:this.student_number+'',token:this.token+''},
                                  ).then
                                (function(response) {
                                  console.log(response.data);
                                //   localStorage.token=response.data.token;
                                  window.location="../个人中心-浏览/个人中心-浏览.html"
                                },function(err){})
                              },
                              getValue()
                              {
                                let selects = document.getElementById("selectid");
                                let indexs = selects.selectedIndex;  
                                 this. direct=selects.options[indexs].value;
                              
                              },
                              getValue2()
                              {
                                let selects = document.getElementById("selectid2");
                                let indexs = selects.selectedIndex;  
                                 this.periodsInformations=selects.options[indexs].value;
                              
                              },
                               upImg(e){
                                let input = document.getElementById('fileImg');
                                         input.onchange=(e)=>{
                                            let file = e.target.files[0];
                                                let param = new FormData(); //创建form对象
                                                    param.append('file',file);//通过append向form对象添加数据
                                                    window.console.log(param.get('file'));
                                                    axios.post('http://39.101.197.26:8080/Borrow_war/UploadServlet.do',param,)
                                .then(response=>{
                                        window.console.log(response);
                                         window.console.log(response.data.image_path);
                                         window.console.log(response.data.old_name);
                                         img_one=response.data.image_path+'';
                                         img_two=response.data.old_name+'';
                                        //   img= 'image_path:'+img_one,'old_name:'+img_two ;
                                        //   img=JSON.parse(img);
                                         img='{'+'"'+'image_path'+'"'+':'+'"'+img_one+'"'+','+'"'+'old_name'+'"'+':'+'"'+img_two+'"'+'}'
                                         localStorage.img=img;
                                         console.log(localStorage.img);
                                     })
                                    .catch(error => {
                                        window.console.log(error)
                                            })} 
                //   input.onchange=(e)=>{
                //   	  let fileObj = e.target.files[0];
                //       let reader = new FileReader()
                //             reader.onload = ()=>{
                //                 var imgurl = reader.result;
                //                 document.getElementById('img').src = imgurl;
                //             }
                //             reader.readAsDataURL(fileObj)
                //         }
                                        
                                                },
                        //     loading(){
                        //  axios.post("https://4d7d45da.cpolar.io/Home/showinf",{token:this.token+'',img:this.img+''}).then
                        //      (function(response) {
                        //           console.log(response.data);
                        //           console.log(response.data.img);
                        //           document.getElementById('img').src =response.data.img;
                        //           document.getElementById('img00').src =response.data.img;
                        //           that.direction=response.data.direction;
                        //           that.sex=response.data.sex;
                        //           that.name=response.data.name;
                        //           that.mail=response.data.mail;
                        //           that.period_number=response.data.period_number;
                        //           that.student_number=response.data.student_number;
                        //           that.tel=response.data.tel;
                        //      })
                        //     },
                            // heading(){
                            //     axios.get('http://******',{ responseType: 'blob'})//返回类型为blob
                            //             .then((res) => {
                            //                     window.console.log(res)
                            //                         const src = window.URL.createObjectURL(res.data)//调用window的这个方法URL方法
                            //                             this.head_photo = src
                            //                                 window.console.log(src)
                            //                     })
                            //          .catch(error => {
                            //                 window.console.log(error)
                            //                  })

                            //         },
                              
                          }
                      })
                    </script>
                
              
            </div>
        </div>
    </body>
</html>

